<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>srpingboot</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!--    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">-->
    <!--    <link rel="stylesheet" type="text/css" href="css/pagination.css">-->
    <style>
        table{
            width:100%;
            border-collapse: collapse;
        }
        table td{
            height:35px;
            line-height: 35px;
            text-align: center;
            border:1px solid #ddd;
        }
        table th {
            height:40px;
            line-height: 40px;
            text-align: center;
            border:1px solid #ddd;
            background:#d3d1d2;
        }
        table tr:nth-child(odd){
            background:#fff;
        }
        table tr:nth-child(even){
            background:#ddd;
        }
        table tr:hover{
            background:#007bff;
        }
        .inputStyle{
            width:120px;
            height:35px;
            padding:3px;
        }
        .inputrightStyle{
            width:300px;
            height:35px;
            padding:3px;
        }
        .btn{
            padding:5px 20px;
            text-align: center;
            margin-right:5px;
            background:#ddd;
        }
        .link{
            color:#80bdff;
            cursor: pointer;
        }

        .pagination {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .pagination li {
            margin: 0 1px;
        }

        .pagination a {
            display: block;
            padding: .5em 1em;
            border: 1px solid #999;
            border-radius: .2em;
            text-decoration: none;
        }

        .pagination a[aria-current="page"] {
            background-color: #333;
            color: #fff;
        }
        .xuanzhong {
            font-weight: bold;
            background: #ddd;
            display: block;
            padding: .5em 1em;
            border: 1px solid #999;
            border-radius: .2em;
            text-decoration: none;
        }

    </style>
</head>
<body>
<!-- 属性替换，其他属性同理 -->
<h1 th:text="${newText}">Hello World</h1>
<!--
    设置多个attr
    th:attr="id=${user.id},data-xxx=${user.xxx},data-yyy=${user.yyy}"

    片段的使用、传值和调用
    <div th:fragment="common(text1,text2)">
        ...
    </div>
    th:insert 是最简单的：它只是插入指定的片段作为其主机标签的主体。
    <div th:insert="base ::common(${text1},${text2})"></div>

    th:replace实际上用指定的片段替换它的主机标签。
    <div th:replace="base ::common(${text1},${text2})"></div>　　　　　　　　　三目表达式：　　　　　<h3 th:text="${loginUser != null} ? ${loginUser.username} : '请登录'"></h3>　
-->

<!-- if-else --><!--
<h3 th:if="${loginUser} ne null" th:text="${loginUser.username}"></h3>
<h3 th:unless="${loginUser} ne null">请登录</h3>

&lt;!&ndash; switch &ndash;&gt;
<div th:switch="${gender}">
    <p th:case="'1'">男</p>
    <p th:case="'0'">女</p>
    &lt;!&ndash; th:case="*"  类似switch中的default &ndash;&gt;
    <p th:case="*">其他</p>
</div>-->
<div style="text-align: center;padding:15px;margin-bottom:30px;">
    <div style="width:48%;float:left;border:1px solid #333;text-align: center;padding:15px;margin-bottom:30px;">
        名称&nbsp;<input class="inputStyle" id="queryPartId">
        名称&nbsp;<input class="inputStyle" id="queryPartId">
        名称&nbsp;<input class="inputStyle" id="queryPartId">
        名称&nbsp;<input class="inputStyle" id="queryPartId">
        <p style="text-align: center;margin-top:20px;">
            <button class="btn" onclick="queryInit()">查询</button>
            <button class="btn" onclick="addInit()">新增</button>
        </p>
    </div>
    <div style="width:48%;float:right;border:1px solid #333;text-align: center;padding:15px;margin-bottom:30px;">
        名称&nbsp;<input class="inputrightStyle" id="queryPartId">
        <p style="text-align: center;margin-top:20px;">
            <button class="btn" onclick="queryInit()">查询</button>
            <button class="btn" onclick="addInit()">新增</button>
        </p>
    </div>


</div>
<!-- 　　　　each　　　　其中，iterStat参数为状态变量，常用的属性有　　　　index 迭代下标，从0开始　　　　count 迭代下标，从1开始　　　　size 迭代元素的总量　　　　current 当前元素
　　 -->
<table class="tablelist" id="example">
    <thead>
    <tr>
        <th>捆包号</th>
        <th>规格</th>
        <th>件数</th>
        <th>包装工艺</th>
        <th>牌号</th>
        <th>零件号</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="product,iterStat : ${pager.list}">
        <td th:text="${product.packId}"></td>
        <td th:text="${product.spec}"></td>
        <td th:text="${product.quantity}"></td>
        <td th:text="${product.productTypeid}"></td>
        <td th:text="${product.shopsign}"></td>
        <td th:text="${product.partId}"></td>
        <td>
            <a class="link" th:data-id="${product.partId}" style="color:#80bdff;" onclick="updateInit(this.getAttribute('data-id'))" >修改</a>
            <!--<a class="link">删除</a>-->


        </td>
    </tr>
    </tbody>
</table>

<!--显示分页信息-->
<div class="modal-footer no-margin-top">
    <div class="col-md-6">
        当前第 [[${pager.pageNum}]]页,共 [[${pager.pages}]] 页.一共 [[${pager.total}]] 条记录
    </div>


    <ul class="pagination pull-right no-margin">
        <li th:if="${pager.hasPreviousPage}">
            <a th:href="'/list?pageNo=1'">首页</a>
        </li>

        <li class="prev" th:if="${pager.hasPreviousPage}">
            <a th:href="'/list?pageNo='+${pager.prePage}">
                <i class="ace-icon fa fa-angle-double-left"></i>
            </a>
        </li>
        <!--遍历条数-->
        <li th:each="nav:${pager.navigatepageNums}">
            <a th:href="'/list?pageNo='+${nav}" th:text="${nav}" th:if="${nav != pager.pageNum}"></a>
            <span th:class="xuanzhong" th:if="${nav == pager.pageNum}" th:text="${nav}" ></span>
        </li>

        <li class="next" th:if="${pager.hasNextPage}">
            <a th:href="'/list?pageNo='+${pager.nextPage}">
                <i class="ace-icon fa fa-angle-double-right"></i>
            </a>
        </li>

        <li>
            <a th:href="'/list?pageNo='+${pager.pages}">尾页</a>
        </li>
    </ul>
</div>

<div class="row">
    <div class="page-container" style="margin:20px auto;">

    </div>
</div>

<div class="modal fade bs-example-modal-lg" id="newAddModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" >
            <div class="modal-header" >
                <h4 class="modal-title">新增</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text" >姓名</span>
                            <input type="text" class="form-control" aria-describedby="name1" id="partId1" >
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text" >姓名</span>
                            <input type="text" class="form-control" aria-describedby="name1" id="spec1">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text" id="quantity">姓名</span>
                            <input type="text" class="form-control" aria-describedby="name1">
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" type="button" class="btn-primary" href="javascript:void(0)" onclick="insertProduct()">确定</button>
                <button data-dismiss="modal" type="button" class="btn-default">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-lg" id="updateModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" >
            <div class="modal-header" >
                <h4 class="modal-title">修改</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text" >捆包号</span>
                            <input type="text" class="form-control" aria-describedby="name1" id="packId" >
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text" >规格</span>
                            <input type="text" class="form-control" aria-describedby="name1" id="spec">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text" id="quantity">件数</span>
                            <input type="text" class="form-control" aria-describedby="name1">
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text" >捆包号</span>
                            <input type="text" class="form-control" aria-describedby="name1" id="packIdd" >
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text" >规格</span>
                            <input type="text" class="form-control" aria-describedby="name1" id="specs">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text" id="quantity">件数</span>
                            <input type="text" class="form-control" aria-describedby="name1">
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" type="button" class="btn-primary" href="javascript:void(0)" onclick="updateProduct('${product.partId}')">修改</button>
                <button data-dismiss="modal" type="button" class="btn-default">取消</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script>

</script>
<script type="text/javascript" >
    function queryInit() {
        var queryPartId  = $("#queryPartId").val();
        window.location.href="/list?partId="+queryPartId
    }

    function  del(id) {
        alert(id);
    }
    function addInit() {
        $('#newAddModal').modal('show');
    }

    function updateInit(id) {
        console.log(id);
        // var partId = $("#partId").val();
        $('#updateModal').modal('show');
        $.ajax({
            url: '/queryInfo',
            data : {"id":id},
            dataType: "json",
            success:function (result) {
                if (result != null && result.length > 0){
                    for (var i=0;i<result.length;i++){
                        $('#partId').val(result[i].partId);
                        $('#spec').val(result[i].spec);

                    }
                }
                    }
        });

    }

    function insertProduct() {
        var partId = $("#partId").val();    // 获取id为username的<input>框数据
        var spec = $("#spec").val();    // 获取id为password的<input>框数据
        $.ajax({
            url: '/insertInfo',
            data : {"partId":partId, "spec":spec},
            dataType: "json",
            success:function (result) {
                if (result.eq("200")){
                    alert("修改成功！")
                }
            }
        });
    }
    
    function updateProduct() {

        var partId = $("#partId").val();    // 获取id为username的<input>框数据
        var spec = removeAllSpace($("#spec").val());    // 获取id为password的<input>框数据
        $.ajax({
            url: '/updateInfo',
            data : {"partId":partId, "spec":spec},
            dataType: "json",
            success:function (result) {
                console.log(result);
                if (result =="200"){
                    /*var back = confirm('是否继续操作');
                    if(back){
                        console.log(11);
                    }else{
                        console.log(2)
                    }*/
                    alert("修改成功！");
                    /*location.href = "/list";*/
                    window.location.reload();

                }
            }
        });
    }

    function removeAllSpace(str) {
        return str.replace(/\s+/g, "");
    }
</script>
</body>
</html>